<template>
    <div>
      <div class="hot">
        <p>热门城市</p>
        <div class="city">
        <sbutton v-for="item in cityhot" :key="item" :myitem="item">{{item}}</sbutton>
        </div>
      </div>
      <van-index-bar
        :sticky="false"
        :index-list="computedList"
        @select="handleChange"
      >
        <div v-for="data in cityList" :key="data.type">
          <van-index-anchor :index="data.type" />
          <van-cell
            :title="item.name"
            v-for="item in data.list"
            :key="item.cityId"
            @click="handleClick(item)"
          />
        </div>
      </van-index-bar>
    </div>
  </template>
  
  <script>
  import http from "@/util/http";
  import { Toast } from "vant";
  import sbutton from '../components/Sbutton.vue'
  
  export default {
    data() {
      return {
        cityList: [],
        cityhot:["北京","上海","广州","杭州","深圳"]
      };
    },
    //计算属性
    computed: {
      computedList() {
        return this.cityList.map((item) => item.type);
      },
    },
  
    mounted() {
      http({
        url: "https://m.maizuo.com/gateway?k=6343605",
        headers: {
          " X-Host": "mall.film-ticket.city.list",
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16642811952715789425639425","bc":"110100"}'
        },
      }).then((res) => {
        // console.log(res.data.data.cities);
        this.cityList = this.renderCity(res.data.data.cities);
        //1.将数据按ABCD顺序分组
        //2.利用转换后的数组，结合组件库进行渲染页面
      });
    },
    methods: {
      renderCity(list) {
        console.log(list);
        let cityList = [];
        let letterList = [];
        for (let i = 65; i < 91; i++) {
          // console.log(String.fromCharCode(i));
          letterList.push(String.fromCharCode(i)); //得出26个大写字母
        }
        // console.log(letterList);
        letterList.forEach((letter) => {
          let newList = list.filter(
            (item) => item.pinyin.substring(0, 1).toUpperCase() === letter
          );
          //   console.log(newList); //要注意有newList可能为零 有些字母没有在城市名的首位
  
          newList.length > 0 &&
            cityList.push({
              type: letter,
              list: newList,
            });
        });
        console.log(cityList);
        return cityList;
      },
      handleChange(data) {
        console.log("change", data);
        Toast(data);
      },
      handleClick(item) {
        // console.log(this.$store.state);
        console.log("city",JSON.parse(JSON.stringify(item)));
        this.$store.commit('changeCityName',JSON.parse(JSON.stringify(item)).name)
       this.$router.back()
      },
    },
    components:{
      sbutton
    }
  };
  </script>
  <style lang="scss" scoped>
  .hot{
    height: 87px;
    p{
      height:32px;
      margin-top: 17px;
      border-bottom: 0.5px #ebebeb solid;
    }
  }
  .city{
    display: flex;
  }
  </style>
  <style lang="scss">
  .van-toast--html,
  .van-toast--text {
    min-width: 30px;
  }
  </style>
  